<style>
.pure_form_extra { background: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 8px; font-size: 12px; width: 250px; }
</style>

<?php
$rslt = $orm->get('pb_ecom_currency', NULL, NULL, NULL, NULL, NULL)->d;
$currs = array();
foreach ($rslt as $itm) {
  if ($itm->is_default == 1) {
    $c1 = $itm;
  }
  $currs[$itm->title] = $itm->rate;
}

$month = Utils::get_param('month', date('Y-m', time()));
$days = cal_days_in_month(CAL_GREGORIAN, date("m", strtotime($month)), date("Y", strtotime($month)));

$opts = new stdClass();
$opts->cd = 't1.date >= :v1 AND t1.date <= :v4 AND t1.is_paid = :v2 AND t1.is_cancel = :v3';
$opts->cdv = array(':v1' => date("Y-m-d", strtotime($month)), ':v2' => 1, ':v3' => 0, ':v4' => date("Y-m-", strtotime($month)) . $days);
$opts->sel = 't.name, t.quantity';
$opts->jt = 'LEFT JOIN pb_ecom_order AS t1 ON t1.id = t.order_id';
$rslt = $orm->get('pb_ecom_purchase', NULL, NULL, NULL, NULL, $opts)->d;
$data = array();
foreach ($rslt as $itm) {
  $ex = 0;
  foreach ($data as $idx2 => $itm2) {
    if ($itm->name == $itm2[0]) {
      $data[$idx2][1] += $itm->quantity;
      $ex = 1;
    }
  }
  if ($ex == 0) {
    $data[] = array($itm->name, (float)$itm->quantity);
  }
}
?>
<div class="pure-form pure_form_extra">
  <label>Select a month </label>
  <input type="text" class="monthpicker" data-selected-year="<?php echo date("Y", strtotime($month)); ?>" value="<?php echo $month; ?>" />
</div>
<div id="chart1" style="height:300px; width:750px;"></div>

<script type="text/javascript">
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __adm_od_id = '<?php echo ADM_OD_ID; ?>';
  var __adm_prod_id = '<?php echo ADM_PROD_ID; ?>';
  var __adm_cus_id = '<?php echo ADM_CUS_ID; ?>';
  
  $(function() {
    $('.monthpicker').monthpicker({
      pattern: 'yyyy-mm'
    });
    
    $('.monthpicker').monthpicker().bind('monthpicker-click-month', function (e, month) {
      Url.redirect(__redmd, __sys + '.php?i=' + __id + '&month=' + e.currentTarget.value);
    });
    if (__data.length == 0) {
      __data = [ ['No data', 0] ];
    }
    var plot1 = jQuery.jqplot ('chart1', [__data], { 
        seriesDefaults: {
          // Make this a pie chart.
          renderer: jQuery.jqplot.PieRenderer, 
          rendererOptions: {
            // Put data labels on the pie slices.
            // By default, labels show the percentage of the slice.
            showDataLabels: true,
            dataLabels: 'value',
            dataLabelFormatString:'%i'
          }
        }, 
        legend: { show:true, location: 'e' }
      }
    );
  });
</script>